把所有的网页元素都看成一个盒子，它具有： content，padding，border，margin 四个属性，这就是盒子模型。

1、W3C标准盒子模型 2、IE盒子模型

标准模式下，一个块的宽度 = width+padding(内边距)+border(边框)+margin(外边距)； W3C模型中： 　　　　　　CSS中的宽（width）=内容（content）的宽 　　　　　　CSS中的高（height）=内容（content）的高

怪异模式下，一个块的宽度 = width+margin(外边距) （即怪异模式下，width包含了border以及padding）。 IE模型中： 　　　　　　CSS中的宽（width）=内容（content）的宽+（border+padding）*2 　　　　　　CSS中的高（height）=内容（content）的高+（border+padding）*2

box-sizing:content-box||border-box||inherit box-sizing:content-box; 将采用标准模式的盒子模型标准

box-sizing:border-box; 将采用怪异模式的盒子模型标准

box-sizing:inherit; 规定应从父元素继承 box-sizing 属性的值。

IE5.5及更早的版本使用的是IE盒模型。IE6及其以上的版本在标准兼容模式下使用的是W3C的盒模型标准。我们说这是一个好消息因为这意味着此盒模型问题只会出现在IE5.5及其更早的版本中。只要为文档设置一个DOCTYPE，就会使得IE遵循标准兼容模式的方式工作。